<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8"/>
    <title>二维码明信片</title>
</head>

<body >

<div class="page" id="app">
    <el-input v-model="postCard.name" placeholder="请输入姓名"></el-input>
    <el-input v-model="postCard.title" placeholder="请输入公司职位[可留空]"></el-input>
    <el-input v-model="postCard.tel" placeholder="请输入手机号"></el-input>
    <el-input v-model="postCard.org" placeholder="请输入公司名称[可留空]"></el-input>
    <el-input v-model="postCard.voice" placeholder="请输入公司电话[可留空]"></el-input>
    <el-input v-model="postCard.address" placeholder="请输入公司地址[可留空]"></el-input>
    <el-input v-model="postCard.email" placeholder="请输入邮箱[可留空]"></el-input>
    <el-input v-model="postCard.note" placeholder="备注信息[可留空]"></el-input>
    <el-row>
        <el-button type="success" @click="createPostCard">确定生成</el-button>
    </el-row>
    <img v-if="imgPath != ''"  :src="imgPath"/>

</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.0-alpha.4/vue.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script>
    let vue = new Vue({
        el:"#app",
        data:{
            postCard:{
                name:'',
                title:'',
                tel:'',
                org:'',
                voice:'',
                address:'',
                email:'',
                note: '',
            },
            imgPath:''

        },
        methods:{
            createPostCard(param) {
                console.log(this.postCard);//查看是否选取到文件
                axios.put('/zing/qr',this.postCard).then((res)=>{
                    if (res.data.success) {
                        console.log(res.data.data)
                        this.imgPath = res.data.data
                    } else {
                        alert("上报失败 " + res.data.errorMsg)
                    }
                })
            },

        }
    });

</script>

</body>
<style>
    .page{
        text-align: center;
    }

</style>
</html>